<template>
  <div class="wrap">
    <back :title="'支付页面'" :type="type"></back>
    <div class="price_wrap">
      <p><span>订单编号</span><b>{{orderId}}</b></p>
      <p><span>应付金额</span><b> ¥{{price_}}</b></p>
    </div>

    <div class="pey_type_wrap">
      <p>支付方式</p>
      <div>
        <i></i>
        <div>
          <h4>微信支付</h4>
          <h5>推荐使用微信支付</h5>
        </div>
        <span></span>
      </div>
    </div>
     <div class="btn_wrap">
         <p @click="pay">确认支付：¥{{price_}}</p>
     </div>
  </div>

</template>

<script type="text/ecmascript-6">
  import {set_cookie,get_cookie} from 'assets/cookie/cookie'
  import {get_pay_key} from 'api/pay'
  import {get_order_price} from 'api/order'
  import back from 'components/back'
  import {price_format} from 'assets/base/base'
  import {mapGetters} from 'vuex'
  export default {
    props: [],
    data(){
      return{
        orderId:'',
        price:0,
        type:1
      }
    },
    created() {
    },
    activated(){
      const {orderId,form} = this.$route.query
      this.type=1
      if(form==='orders'){
        this.type=0
      }
      get_order_price({
        token:get_cookie('key'),
        orderId:orderId,
        authToken:get_cookie('weixinKey')
      }).then(res=>{
        console.log(res)
        if(res.status===200&&res.data.resStatus===0){
          this.price=res.data.data.realPrice
          this.orderId=res.data.data.orderId
        }
      })
    },
    mounted() {

    },
    computed: {
      price_(){
        return price_format(this.price,2)
      },
      ...mapGetters(['openId'])
    },
    methods: {
      pay(){
        get_pay_key({
          price:this.price,
          token:get_cookie('key'),
          orderId:this.orderId
        }).then((res)=>{
          if(res.status===200&&res.data.resStatus===0){
            let that=this
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest',
              res.data.data,
              function(res){
                if(res.err_msg === "get_brand_wcpay_request:ok" ) {
                    that.$router.replace({
                      path: "/myOrder",
                      query: {
                        type:"1"
                      }
                    })
                }
              }
            );
          }else{
            alert(res.data.message)
          }

        })


      }
    },
    components: {
      back
    }
  }
</script>

<style scoped lang="scss">
  .wrap{
    padding-top: 49px;
    background: #eee;
  }
  .price_wrap{
    padding-top: 15px;
    background: #fff;
    >p{
      height: 35px;
      line-height: 35px;
      border-top: 1px solid #ddd;
      >span{
        float: left;
        margin-left: 22px;
      }
      >b{
        float: left;
        margin-left: 20px;
      }
    }
  }

  .pey_type_wrap{
    margin-top: 15px;
    padding-top: 10px;
    background: #fff;
    >p{
      height: 30px;
      border-bottom: 1px solid #ddd;
      line-height: 30px;
      text-align: left;
      padding-left: 20px;
    }
    >div{
      height: 60px;
      position: relative;
      >i{
        float: left;
        width: 50px;
        height: 50px;
        margin-top: 5px;
        margin-left: 19px;
        border-radius: 10px;
        margin-right: 14px;
        background-size: 100% 100%;
        background-image: url('../assets/img/weixin.png');
      }
      >div{
        overflow: hidden;
        margin-right: 50px;
        text-align: left;
        height: 60px;
        letter-spacing: 1px;
        >h4{
          font-size: 15px;
          margin-top: 12px;
          color: #666;
          height: 16px;
          line-height: 16px;
        }
        >h5{
          margin-top: 9px;
          color: #999;
          font-size: 12px;
          font-weight: 500;
        }
      }
      >span{
        position: absolute;
        right: 21px;
        top: 19px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-size: 100% 100%;
        background-image: url('../assets/img/activeRed.png');
      }
    }
  }

 .btn_wrap{
   margin-top: 1px;
   background: #fff;
   padding-top: 45px;
   >p{
     width: 300px;
     margin: 0 auto;
     background: #23ac38;
     height: 34px;
     line-height: 34px;
     color: #fff;
     border-radius: 5px;
     font-size: 14px;
     &:active{
       background-color: #129b27;
     }
   }
 }

</style>
